<template>
  <div>
    <div class="div">
    <form action="/">
  <van-search
    v-model="keywords"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
      <div v-for="item in search(keywords)" :key="item.id">
        <font class="namefont" @click="tiaozhuan(item.name)">{{item.name}}</font>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Header from "@/components/Headergl/Header2";
import shop from "@/components/shop";
export default {
  data() {
    return {
      keywords: "",
      list: [],

    };
  },
  methods: {
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    chushihua() {
      this.$http
        .get(this.poot + "selectcommodity")
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    search(keywords) {
      return this.list.filter(item => {
        if (item.name.replace(" ", "").includes(keywords.replace(" ", ""))) {
          return item;
        }
      });
    },
    tiaozhuan(name) {
    this.$router.push("/shangpinxiangqing/"+name);
    },
    onSearch() {
   this.$router.push("/shopitem/"+this.keywords);
    },
    onCancel(){
    this.$router.go(-1);
      this.xg(false);
    }
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"]),
    ...mapState(["user"])
  },
    components: {
    Header: Header,
    shop:shop
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>

.namefont {
  font-size: 12px;
  margin-left: 20px;
}
.div {
  text-align: left;
}
</style>